<template>
  <div class="match">
    <div class="wrap">
      <div class="new-match" ref="newMatchRef"></div>
      <div class="new-match end-match" ref="endMatchRef"></div>
      <!-- <div class="match-title flex flex-ac">
        <div class="title">最新比赛</div>
        <a class="more" href="">查看全部</a>
      </div>
      <ul class="match-details">
        <li
          class="match-item flex flex-ac"
          v-for="(match, index) in matchList"
          :key="index"
        >
          <a
            class="flex match-link"
            href="https://www.huya.com"
            target="_blank"
          >
            <div class="match-team flex flex-ac">
              <i
                class="game-icon"
                :style="{
                  background: `url(${match.icon}) no-repeat`,
                }"
              ></i>
              <span class="team-name">{{ match.team[0] }}</span>
              <span class="vs">vs</span>
              <span class="team-name">{{ match.team[1] }}</span>
            </div>
            <div class="match-live">live</div>
          </a>
        </li>
      </ul> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { getMatchList } from "@/api/match";
import { ref, onMounted } from "vue";

const newMatchRef = ref<HTMLDivElement>();

const endMatchRef = ref<HTMLDivElement>();

onMounted(async () => {
  const result = await getMatchList();
  if (newMatchRef.value && endMatchRef.value) {
    newMatchRef.value.innerHTML = result.data[0];
    endMatchRef.value.innerHTML = result.data[1];
  }
});
</script>

<style lang="scss">
.match {
  padding: 0 1rem;
  padding-bottom: 1rem;
  background-color: var(--xz-card-bg);

  .wrap {
    .new-match {
      background-color: var(--xz-card-bg);
      // border-bottom: 1px solid #464646;
      border-bottom: var(--style-border-dashed);
      padding: 0 14px 16px;
      font-size: 13px;

      .new-match-title {
        // border-bottom: 1px dotted #efefef;
        border-bottom: var(--style-border-dashed);
        overflow: hidden;

        .alias-h2 {
          float: left;
          font-size: 16px;
          font-weight: 700;

          em {
            display: inline-block;
            width: 22px;
            height: 31px;
            background: url(https://static.wanplus.cn/images/icons.png)
              no-repeat;
            margin-right: 6px;
          }
        }

        span {
          float: right;
          font-size: 12px;
          cursor: pointer;
          line-height: 50px;
          color: #858585;
        }
      }

      .match-details {
        width: 100%;

        li {
          position: relative;
          width: 100%;
          height: 35px;
          // border-bottom: 1px dotted #efefef;
          border: var(--style-border-dashed);

          a {
            display: block;
            height: 35px;

            &:hover {
              color: var(--xz-theme) !important;
            }

            .match-team {
              float: left;
              display: flex;
              align-items: center;
              height: 100%;
              gap: 5px;

              .team-logo {
                margin-top: 9px;
              }

              .team-flag {
                margin-top: 8px;
                width: 20px;
                margin: -2px 4px 0 0;
              }
            }

            .match-time {
              float: right;
            }
          }
        }
      }
    }
  }
}

.match-time em {
  line-height: 35px;
  font-size: 12px;
}

em.lg1,
i.lg1 {
  background: url(https://static.wanplus.cn/data/common/index/lg1.png) center
    no-repeat;
  background-size: cover;
}

em.lg3,
i.lg3 {
  background: url(https://static.wanplus.cn/data/common/index/lg3.png) center
    no-repeat;
  background-size: cover;
}

em.lg2,
i.lg2 {
  background: url(https://static.wanplus.cn/images/lg2.png) center no-repeat;
  background-size: cover;
}

em.lg4,
i.lg4 {
  background: url(https://static.wanplus.cn/images/lg4.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg5,
i.lg5 {
  background: url(https://static.wanplus.cn/images/lg5.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg6,
i.lg6 {
  background: url(https://static.wanplus.cn/images/lg6.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg7,
i.lg7 {
  background: url(https://static.wanplus.cn/images/lg7.png) center no-repeat;
  background-size: cover;
}

em.lg8,
i.lg8 {
  background: url(https://static.wanplus.cn/images/lg8.png) center no-repeat;
  background-size: cover;
}

em.lg9,
i.lg9 {
  background: url(https://static.wanplus.cn/images/lg9.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg12,
i.lg12 {
  background: url(https://static.wanplus.cn/images/lg12.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg-1,
em.lg99,
i.lg-1,
i.lg99 {
  background: url(https://static.wanplus.cn/images/lg99.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg98,
i.lg98 {
  background: url(https://static.wanplus.cn/images/lg98.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg13,
i.lg13 {
  background: url(https://static.wanplus.cn/images/lg13.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

em.lg14,
i.lg14 {
  background: url(https://static.wanplus.cn/images/lg14.png) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

i.CN {
  background: url(https://static.wanplus.cn/data/common/country/CN.png) center
    no-repeat;
  background-size: cover;
}

i.team-logo {
  width: 14px !important;
  margin: -2px 8px 0 0 !important;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

i.game,
i.team-flag,
i.team-logo {
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

.team-name {
  display: inline-block;
  width: 62px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.team-vs {
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}

.team-name,
.team-vs {
  font-size: 12px;
}
</style>
